<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Thymeleaf Interactive Tutorial</title>
        <link rel="stylesheet" href="../../css/main-static.css" th:href="@{/css/main.css}" />
        <meta charset="utf-8" />
    </head>
    <body>
        <img src="../../thymeleaflogonameverysmall.png" th:src="@{/thymeleaflogonameverysmall.png}"/>
        <div style="background-color: orange; padding: 2em;">
            <b>Work in progress!</b><br /><br />
            <b>TODO:</b>
            <ul>
                <li>Address security issues (blacklist .getClass(), .class, T(...), etc.)</li>
                <li>When a error raises, highlight the line with the error (is not line number in TPE?)</li>
                <li>Correct static view for all .html files</li>
                <li>Show Java files inside a dialog?</li>
                <li>Problem with exercise 4: i18n --> allow change locale ?locale=fr, use locale in TemplateEngine</li>
                <li>Adapt and test all 14 exercises</li>
                <li>Resolve codification issues on GAE</li>
                <li>Improve UI (icons...)</li>
                <li>Unify CSS files</li>
                <li>Test on browsers even IE</li>
                <li>Revise code conventions</li>
            </ul>
        </div>
        <h1>The Thymeleaf Interactive Tutorial</h1>
        <p>
            Welcome to the Thymeleaf Interactive Tutorial. Thymeleaf version is
            <span th:text="${thymeleafVersion}">1.0.0</span>.
        </p>
		<h2>Description</h2>
		<ul>
		    <li>
                This tutorial will guide you through the most important aspects of the Thymeleaf <i>Standard Dialects</i>.
            </li>
		    <li>
                We recommend to read the
                <a href="http://www.thymeleaf.org/standarddialect5minutes.html">5-minute introduction to Thymeleaf</a>
                before starting this interactive tutorial.
			</li>
            <li>
                At the beginning of each exercise a link to the relevant chapter of the
                <a href="http://www.thymeleaf.org/doc/html/Using-Thymeleaf.html"
                   title="Open Thymeleaf manual">Using Thymeleaf</a> manual will be provided.
                Usually that section of the manual will contain all the information you will need
                to complete the exercise.
            </li>
			<li>
                In each exercise you will be asked to complete some task editing the provided source code. <br />
                As you type into the online editor, three views will be shown:
                <ol>
                    <li>
                        <b>Generated sources</b>: this is the HTML code that your server will produce when the template 
                        is processed.
                    </li>
                    <li>
                        <b>Static view</b>: this is how you would see the template if you open it as a static file 
                        directly with a browser. This is what we called <i>Natural templating</i>, which allows
                        static prototyping of web pages.
                    </li>
                    <li>
                        <b>Dynamic view</b>: this is the result served by your application server, it is what your
                        users see.
                    </li>
                </ol>
            </li>
		</ul>
        <h2>Table of contents</h2>
        <ul>
            <li th:each="exercise : ${exercises}">
                <a href="exercise.html"
                   th:href="@{/exercise/__${exercise.index}__}"
                   th:text="${exercise.description}">Exercise 1: bean values</a>
            </li>
        </ul>
        <h2>Further resources</h2>
        <p>
            You can find much more documentation on Thymeleaf at the
            <a href="http://www.thymeleaf.org">Thymeleaf website</a>.
        </p>
        <p>
            For any questions or help, you can use the <a href="http://forum.thymeleaf.org/">user forum</a>.
        </p>
        <h3 class="footer">Copyright &copy; 2013 The Thymeleaf Team</h3>
    </body>
</html>
